<template>
    <div class="mj-styles">
        <editor-title title="风格选择" tips="指定midjourney的渲染风格" />
        <div>
            <el-select
                v-model="currentStyle"
                placeholder="请选择风格"
                class="w-full mt-[8px]"
                size="large"
            >
                <el-option
                    v-for="(item, key) in mjStyles"
                    :key="item"
                    :label="item"
                    :value="key"
                />
            </el-select>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useVModels } from '@vueuse/core'
import { config, formData } from '../../hooks/useDrawEffect'
import editorTitle from '../common/editor-title.vue'

interface MjStyleType {
    default: string;
    expressive: string;
    scenic: string;
    cute: string;
}

const emits = defineEmits<{
    (event: 'update:modelValue', value: string): void
}>()

const props = defineProps({
    // 风格: [default,expressive,scenic,cute]
    modelValue: {
        type: String,
        default: 'default'
    }
})

const { modelValue: currentStyle } = useVModels(props, emits)

const mjStyles = computed<MjStyleType>(() => config.value?.mj_style as MjStyleType)

watch(
    () => [formData.value.model, mjStyles.value],
    ([v1, _v2]) => {
        if (!config.value?.mj_style) {
            return
        }
        if (currentStyle.value !== v1) {
            const keys = Object.keys(config.value?.mj_style)
            currentStyle.value = config.value?.mj_style[keys[0]]
        }
    }, { immediate: true }
)
</script>
